{% extends 'base.html' %}

{% block title %}
    增设课程
{% endblock %}

{% block link %}
    <script>
        function showImg() {
            let file = document.getElementById('inputFile').files[0];
            let re = new FileReader();
            re.readAsDataURL(file);
            re.onload = function (re) {
                $('#inputImage').attr('src', re.target.result);
            }
        }
    </script>
{% endblock %}

{% block content %}
    <form action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}

        <img src="{{ MEDIA_URL }}{{ "user/default.png" }}" alt="头像" id="inputImage">
        <p>
            <label for="inputFile" class="sr-only">Image</label>
            <input type="file" onchange="showImg()" id="inputFile" name="css_image" accept="image/*">
            <a href="javascript:;">上传封面</a>
        </p>

        <div class="form-row align-items-center">
            <label for="inputName" class="sr-only">课程名称</label>
            <div class="input-group">
                <div class="input-group-prepend">
                  <div class="input-group-text form-bottom">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-emoji-sunglasses" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                      <path fill-rule="evenodd" d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM6.5 6.497V6.5h-1c0-.568.447-.947.862-1.154C6.807 5.123 7.387 5 8 5s1.193.123 1.638.346c.415.207.862.586.862 1.154h-1v-.003l-.003-.01a.213.213 0 0 0-.036-.053.86.86 0 0 0-.27-.194C8.91 6.1 8.49 6 8 6c-.491 0-.912.1-1.19.24a.86.86 0 0 0-.271.194.213.213 0 0 0-.036.054l-.003.01z"></path>
                      <path d="M2.31 5.243A1 1 0 0 1 3.28 4H6a1 1 0 0 1 1 1v1a2 2 0 0 1-2 2h-.438a2 2 0 0 1-1.94-1.515L2.31 5.243zM9 5a1 1 0 0 1 1-1h2.72a1 1 0 0 1 .97 1.243l-.311 1.242A2 2 0 0 1 11.439 8H11a2 2 0 0 1-2-2V5z"></path>
                    </svg>
                  </div>
                </div>
              <input type="text" name="css_name" id="inputName" class="form-control" placeholder="课程名称" required autofocus>
            </div>
        </div>

        <div class="form-row align-items-center">
            <label for="inputDesc" class="sr-only">课程简介</label>
            <div class="input-group">
                <div class="input-group-prepend">
                  <div class="input-group-text form-bottom">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-telephone" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M3.925 1.745a.636.636 0 0 0-.951-.059l-.97.97c-.453.453-.62 1.095-.421 1.658A16.47 16.47 0 0 0 5.49 10.51a16.471 16.471 0 0 0 6.196 3.907c.563.198 1.205.032 1.658-.421l.97-.97a.636.636 0 0 0-.06-.951l-2.162-1.682a.636.636 0 0 0-.544-.115l-2.052.513a1.636 1.636 0 0 1-1.554-.43L5.64 8.058a1.636 1.636 0 0 1-.43-1.554l.513-2.052a.636.636 0 0 0-.115-.544L3.925 1.745zM2.267.98a1.636 1.636 0 0 1 2.448.153l1.681 2.162c.309.396.418.913.296 1.4l-.513 2.053a.636.636 0 0 0 .167.604L8.65 9.654a.636.636 0 0 0 .604.167l2.052-.513a1.636 1.636 0 0 1 1.401.296l2.162 1.681c.777.604.849 1.753.153 2.448l-.97.97c-.693.693-1.73.998-2.697.658a17.47 17.47 0 0 1-6.571-4.144A17.47 17.47 0 0 1 .639 4.646c-.34-.967-.035-2.004.658-2.698l.97-.969z"></path>
                    </svg>
                  </div>
                </div>
              <input type="text" name="css_desc" id="inputDesc" class="form-control" placeholder="课程简介" required>
            </div>
        </div>

        <div class="form-row align-items-center">
            <label for="inputDetail" class="sr-only">课程详情</label>
            <div class="input-group">
                <div class="input-group-prepend">
                  <div class="input-group-text form-bottom">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 0 0 .014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 0 0 .022.004zm9.974.056v-.002.002zM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"></path>
                    </svg>
                  </div>
                </div>
              <input type="text" name="css_detail" id="inputDetail" class="form-control" placeholder="课程详情" required>
            </div>
        </div>

        <div class="form-row align-items-center">
            <label for="inputNeed" class="sr-only">课程须知</label>
            <div class="input-group">
                <div class="input-group-prepend">
                  <div class="input-group-text form-bottom">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 0 0 .014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 0 0 .022.004zm9.974.056v-.002.002zM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"></path>
                    </svg>
                  </div>
                </div>
              <input type="text" name="css_course_need" id="inputNeed" class="form-control" placeholder="课程须知" required>
            </div>
        </div>

        <div class="form-row align-items-center">
            <label for="inputNumber" class="sr-only">课程最大学习人数</label>
            <div class="input-group">
                <div class="input-group-prepend">
                  <div class="input-group-text form-bottom">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 0 0 .014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 0 0 .022.004zm9.974.056v-.002.002zM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"></path>
                    </svg>
                  </div>
                </div>
              <input type="text" name="css_max_num" id="inputNumber" class="form-control" placeholder="课程最大学习人数" required>
            </div>
        </div>

        <div class="form-row align-items-center">
            <label for="inputStartTime" class="sr-only">开始选课时间</label>
            <div class="input-group">
                <div class="input-group-prepend">
                  <div class="input-group-text form-bottom">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 0 0 .014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 0 0 .022.004zm9.974.056v-.002.002zM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"></path>
                    </svg>
                  </div>
                </div>
              <input type="text" name="css_start_time" id="inputStartTime" class="form-control" placeholder="开始选课时间" required>
            </div>
        </div>

        <div class="form-row align-items-center">
            <label for="inputEndTime" class="sr-only">选课截止时间</label>
            <div class="input-group">
                <div class="input-group-prepend">
                  <div class="input-group-text form-bottom">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 0 0 .014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 0 0 .022.004zm9.974.056v-.002.002zM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"></path>
                    </svg>
                  </div>
                </div>
              <input type="text" name="css_end_time" id="inputEndTime" class="form-control" placeholder="选课截止时间" required>
            </div>
        </div>

        <div class="form-row align-items-center">
            <label for="inputGender" class="sr-only">授课老师</label>
            <div class="input-group">
                <div class="input-group-prepend">
                  <div class="input-group-text form-bottom">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-award" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M9.669.864L8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193l-1.51-.229L8 1.126l-1.355.702-1.51.229-.684 1.365-1.086 1.072L3.614 6l-.25 1.506 1.087 1.072.684 1.365 1.51.229L8 10.874l1.356-.702 1.509-.229.684-1.365 1.086-1.072L12.387 6l.248-1.506-1.086-1.072-.684-1.365z"></path>
                      <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"></path>
                    </svg>
                  </div>
                </div>
                <select name="css_gender" id="inputGender" class="form-control" required>
                    <option selected>授课老师</option>
                    {% for teacher in teachers %}
                        <option value="{{ teacher.id }}">{{ teacher.css_name }}</option>
                    {% endfor %}
              </select>
            </div>
        </div>

        <button class="btn btn-lg btn-primary btn-block" type="submit">增加</button>

    </form>
{% endblock %}